<template>
	<view class="order">
		<view class="order-top">
			<view class="o-t-title">
				<image class="o-t-t-img" :src="imgUrl2" mode="aspectFit"></image>
				<picker class="picker" :range="addressinfo" range-key="a_name" v-if="addressinfo.length > 0"
					@change="bindPickerChange">
					<view class="o-t-t-con">
						<view class="t-con-text">
							<view>
								<text class="t-c-text">{{diziData.a_name || ''}}</text>
								<text class="t-c-text">{{diziData.tel || ''}}</text>
							</view>
							<uni-icons type="right" color="#999999" :size="'28r'"></uni-icons>
						</view>
						<view class="t-con-text1">
							<text class="t-c-text1">{{diziData.road || ''}}</text>
						</view>
					</view>
				</picker>
				<view class="o-t-t-con1" v-else @click="addressClick('address-up')">
					<text class="t-c-text">暂无地址，请去添加地址</text>
					<uni-icons type="right" color="#999999" :size="'28r'"></uni-icons>
				</view>
			</view>
			<view class="o-t-body">
				<view class="t-body-box">
					<view class="b-box-title">
						<text class="box-t-text">保洁信息</text>
					</view>
					<checkbox-group @change="checkboxChange">
						<view v-if="state1">
							<uni-list :border="false" v-if="listData.length > 0">
								<uni-swipe-action class="uni-action" ref="action">
									<uni-swipe-action-item class="uni-action-item" :threshold="0"
										:right-options="options1" @click="delClick(obj.id)" v-for="obj in listData"
										:key="obj.id">
										<uni-list-item :border="false">
											<!-- 自定义 body -->
											<view slot="body" class="slot-box slot-main">
												<image class="slot-main-image" :src="obj.avatar[0]" mode=""></image>
												<view class="slot-main-con">
													<view class="main-con name">
														{{obj.real_name?obj.real_name:obj.nickname}}
													</view>
													<view class="main-con score">
														<view class="dis-corder">
															<image class="img-14" :src="imgUrl" mode="aspectFit" />
															<text style="color: #FEAD1D;">{{obj.score || ''}}</text>
														</view>
														<text>已服务 {{obj.services_num || '0'}}次</text>
													</view>
												</view>
											</view>
										</uni-list-item>
									</uni-swipe-action-item>
								</uni-swipe-action>
							</uni-list>
						</view>
						<view
							style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;height:100%;"
							v-else>
							<image :src="imgUrl3" style="width: 175rpx;height:145rpx;margin:20rpx 0 16rpx;"></image>
							<text
								style="font-size: 28rpx;font-weight: 500;color: #777777;margin-bottom: 20rpx;">暂无保洁信息!</text>
						</view>
					</checkbox-group>
					<view class="o-t-input">
						<view class="o-t-box">
							<text class="t-box-text">服务时间</text>
							<text class="t-box-text t-box-text1" v-if="state == 1">{{date}}</text>
							<picker v-else class="picker" :range="dateArr" @change="bindPickerChange1">
								<view v-if="dateArr.length == 0" class="t-box-text">
									无可预约时间
									<uni-icons type="right" color="#999999" :size="'28r'"></uni-icons>
								</view>
								<view v-else class="t-box-text" :class="date?'t-box-text1':''">
									{{date?date:'请选择时间'}}
									<uni-icons type="right" color="#999999" :size="'28r'"></uni-icons>
								</view>
							</picker>
						</view>
						<uni-forms-item class="item-none" label="上班时间" name="work_time">
							<uni-easyinput :clearable="false" :inputBorder="false" v-model="work_time"
								placeholder="请选择上班时间" style="display:none" />
							<picker mode="time" :value="work_time" start="00:00" end="23:59" @change="sbDateChange">
								<view class="box-text">
									{{work_time == ''?'请选择上班时间':work_time}}
									<uni-icons class="icons" type="bottom" size="28r" />
								</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item class="item-fangliang" label="预计房量" name="expect_room_number">
							<uni-easyinput type="number" :clearable="false" :inputBorder="false"
								v-model="expect_room_number" placeholder="请输预计房量" />
						</uni-forms-item>
						<uni-forms-item class="item-fangliang" label="补贴" name="subsidy">
							<uni-easyinput type="number" :clearable="false" :inputBorder="false"
								v-model="subsidy" placeholder="请输入金额(元/人)" />
						</uni-forms-item>
						<view class="o-t-box1">
							<text class="t-box-text">备注</text>
							<uni-easyinput :clearable="false" type="textarea" class="input" v-model="remarks"
								placeholderStyle="font-weight: 300;" placeholder="备注信息"></uni-easyinput>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="l-but">
			<button class="but-but" size="mini" @click="addClick()">提交订单</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				imgUrl: `${getApp().globalData.imgScr}jd/xinji.png`,
				imgUrl2: `${getApp().globalData.imgScr}jd/dizhi_xiangqiye.png`,
				imgUrl3: `${getApp().globalData.imgScr}jd/dingdankongzhuangtai.png`,
				work_time: '', // 上班时间
				url: '/hotelAdmin/my/address', // 跳转至添加地址路径
				dateArr: [], // 可预约时间
				date: '', // 选择的时间
				remarks: '', // 备注
				expect_room_number:'',// 预计房量
				subsidy:'', // 补贴金额
				listData: [],
				listVal: [],
				state: '', // 跳转到当前页面的途径 1 是服务员页面跳转 2 是收藏页面跳转
				state1: true, // 判断是否有数据
				pid: '', // 选中的保洁id
				type: '', // 1 是长期工 2 是短期工状态
				addressinfo: [], // 地址信息
				diziData: {}, // 渲染的地址信息
				infoVal: 0,
				iocState: true,
				options1: [{ // 左滑动 操作按钮数据
					text: '删除',
					style: {
						backgroundColor: '#FF4B4B',
						color: '#ffffff'
					}
				}],
			}
		},
		onShow() {
			let _this = this
			if (this.pid) {
				this.$http.post('/index/Hotelcleaner/orderinfo', {
					cleanerids: this.pid
				}).
				then(function(res) {
					//这里只会在接口是成功状态返回
					_this.addressinfo = res.addressinfo
					_this.listData = res.cleanerinfo
					_this.state1 = _this.listData.length
					_this.diziData = res.addressinfo[0]
				}).catch(function(e) {
					//这里只会在接口是失败状态返回，不需要去处理错误提示
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				});
			}

		},
		onLoad(option) {
			if (!option.date) {
				this.getDate(option.id, option.type)
			}
			this.pid = option.id
			this.type = option.type
			this.date = option.date ? option.date : ''
			this.state = option.date ? 1 : 2
		},
		methods: {
			/**
			 * 点击复选框时触发
			 * @param {Object} e 复选框实例对象
			 */
			checkboxChange: function(e) {
				this.listVal = e.target.value;
				let items = this.listData,
					values = e.detail.value;
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					let item = items[i]
					if (values.indexOf(item.value) >= 0) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				};
			},
			/**
			 * 提交订单 按钮触发事件
			 */
			async addClick() {
				if (this.pid == '') return uni.showToast({
					icon: "none",
					title: '请添加保洁信息！'
				})
				let _this = this
				let title = ''
				try {
					if (this.date == '') {
						title = '请选择时间'
					} else if (this.addressinfo.length == 0) {
						title = '请添加地址'
					} else {
						title = '提交成功'
						uni.showLoading({
							title: '下单中...',
							mask: true
						})
						let dates = this.date.split('-').join('')
						let res = await this.$http.post('/index/Hotelcleaner/Short_workers', {
							cleaner_type: _this.type,
							cleanerids: _this.pid,
							service_time: dates,
							address_id: _this.diziData.id,
							remarks: _this.remarks,
							work_time: _this.work_time,
							expect_room_number: _this.expect_room_number,
							subsidy:_this.subsidy ? _this.subsidy : 0
						})
						if (this.type == 1) {
							uni.switchTab({
								url: '/pages/tag/indent/indent'
							});
						} else if (this.type == 2) {
							await uni.switchTab({
								url: '/pages/tag/indent/indent'
							})
						}
						uni.hideLoading()
					}
					await uni.showToast({
						icon: "none",
						title: title
					})

				} catch (e) {
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}
			},
			/**
			 * 弹窗取消按钮
			 */
			qvxiao() {
				this.$refs.popup.close('center')
			},
			/**
			 * 弹窗确定按钮
			 */
			async okClick() {
				this.$refs.popup.close('center')
				let _this = this
				let title = ''
				try {
					if (this.date == '') {
						title = '请选择时间'
					} else if (this.addressinfo.length == 0) {
						title = '请添加地址'
					} else {
						title = '提交成功'
						let dates = this.date.split('-').join('')
						let res = await this.$http.post('/index/Hotelcleaner/Short_workers', {
							cleaner_type: _this.type,
							cleanerids: _this.pid,
							service_time: dates,
							address_id: _this.diziData.id,
							remarks: _this.remarks,
						})
						if (this.type == 1) {
							uni.redirectTo({
								url: '/hotelAdmin/my/permanent-worker/permanent-worker'
							});
						} else if (this.type == 2) {
							await uni.switchTab({
								url: '/pages/tag/indent/indent'
							})
						}
					}
					await uni.showToast({
						icon: "none",
						title: title
					})

				} catch (e) {
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}

			},
			sbDateChange: function(e) {
				this.work_time = e.detail.value
				console.log(e)
			},
			/**
			 * 删除按钮 触发的事件
			 * @param {Object} id 当前列表数据的id
			 */
			delClick: function(id) {
				let _this = this
				// 打开加载动画
				uni.showLoading({
					title: '删除中...',
					mask: true
				})
				this.listData.forEach((item, index) => {
					if (item.id == id) {
						_this.listData.splice(index, 1)
					}
				})
				let rid = []
				this.listData.forEach(item => {
					rid.push(item.id)
				})
				this.pid = rid.join(',')
				if (this.listData.length > 0) {
					uni.hideLoading()
					uni.showToast({
						title: `删除成功`,
						icon: 'none'
					})
					this.state1 = this.listData.length
				} else {
					this.state1 = this.listData.length
					uni.hideLoading()
					uni.showToast({
						title: '暂无保洁信息！请重新添加！',
						icon: 'none'
					})
				}
			},
			/**
			 * 地址选择时触发
			 * @param {Object} e 选择的地址信息
			 */
			bindPickerChange(e) {
				let index = e.detail.value * 1
				this.diziData = this.addressinfo[index]
			},
			/**
			 * 时间选择时触发
			 * @param {Object} e 选择的地址信息
			 */
			bindPickerChange1(e) {
				this.date = this.dateArr[e.detail.value]
			},
			/**
			 * 弹窗状态发生变化触发 
			 * @param {Object} e={show: true｜false,type:当前模式}
			 */
			change: function(e) {},
			/**
			 * 跳转到添加地址页面
			 */
			addressClick(path) {
				uni.navigateTo({
					url: `${this.url}/${path}/${path}?type=1`,
				});
			},
			async getDate(cleanerid, cleanertype) {
				try {
					let res = await this.$http.get("/index/Hotelcleaner/cleaner_time", {
						cleanertype,
						cleanerid
					})
					this.dateArr = res.map(item => {
						return item.date
					})
				} catch (e) {
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.order {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		width: 100%;
		height: 100vh;
		padding-top: 20rpx;
		overflow: hidden;

		//内容区域样式
		.order-top {
			display: flex;
			flex-direction: column;
			flex: 1;
			margin-bottom: 20rpx;
			overflow: hidden;
			padding: 0 20rpx;

			// 顶部标题栏样式
			.o-t-title {
				display: flex;
				align-items: center;
				width: 100%;
				box-sizing: border-box;
				padding: 40rpx;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				background-color: #FFFFFF;
				overflow: hidden;

				.o-t-t-img {
					width: 44rpx;
					height: 44rpx;
					margin-right: 40rpx;
				}

				.picker {
					flex: 1;
				}

				.o-t-t-con {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.t-con-text {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.t-c-text {
							font-size: 28rpx;
							font-weight: 500;
							color: #000000;
							margin-right: 30rpx;
						}
					}

					.t-con-text1 {
						.t-c-text1 {
							font-size: 24rpx;
							font-weight: 500;
							color: rgba($color: #000000, $alpha: 0.7);
							margin-right: 30rpx;
						}
					}
				}

				.o-t-t-con1 {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.t-c-text {
						font-size: 28rpx;
						font-weight: 500;
						color: #000000;
					}
				}
			}

			// 中间 列表栏样式
			.o-t-body {
				flex: 1;
				overflow: auto;

				.t-body-box {
					border-radius: 20rpx;
					overflow: hidden;
					background-color: #FFFFFF;
					padding: 40rpx;
				}

				.b-box-title {
					border-bottom: 1px solid #DCDCDC;
					padding-bottom: 20rpx;
					margin-bottom: 30rpx;

					.box-t-text {
						// border: 1rpx solid #EDEDED;
						font-size: 28rpx;
						font-weight: 600;
						color: #000000;
					}
				}

				// 列表每一项内容的样式
				.uni-list-item__container {
					box-sizing: border-box;
					padding: 0;
					margin-bottom: 30rpx;
				}

				// 列表区域 自定义 header body 公共样式
				.slot-box {
					display: flex;
					align-items: center;
				}

				// 列表区域 自定义 body 的样式
				.slot-main {
					flex: 1;

					// 列表区域 图片样式
					.slot-main-image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 20rpx;
						border: 0;
					}

					// 列表区域 详情信息 样式
					.slot-main-con {
						flex: 1;
						display: flex;
						flex-direction: column;
						margin-left: 16rpx;
						padding-right: 24rpx;

						.main-con {
							flex: 1;
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #000000;

							// 小图片和描述信息的对齐方式
							.dis-corder {
								display: flex;
								align-items: center;
								margin-right: 20rpx;

								.img-14 {
									width: 28rpx;
									height: 28rpx;
									margin: 8rpx;
								}
							}
						}

						.name {
							font-size: 28rpx;
							font-weight: 600;
						}

						.score {
							margin: 12rpx 0;
						}
					}
				}

				// 输入栏 样式
				.o-t-input {
					background-color: #FFFFFF;

					.t-box-text {
						width: 160rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: rgba($color: #000000, $alpha: 0.7);

					}

					.o-t-box {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 40rpx;

						.picker {
							flex: 1;

							.t-box-text {
								width: 100%;
								text-align: right;
							}
						}

						.t-box-text1 {
							flex: 1;
							text-align: right;
							color: #000000;
						}

					}

					.o-t-box1 {
						display: flex;
						flex-direction: column;

						.input {
							flex: 1;
							margin-top: 20rpx;
						}
					}
				}
			}
		}


		// 立即预约按钮样式
		.l-but {
			box-sizing: border-box;
			padding: 20rpx;

			.but-but {
				width: 100%;
				line-height: 80rpx;
				border-radius: 40rpx;
				background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.but-but::after {
				display: none;
			}
		}

		.popup {
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			width: 560rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 40rpx;
			overflow: hidden;

			.p-title {
				text-align: center;
				font-size: 34rpx;
				font-weight: 600;
				color: #000000;
				margin-bottom: 44rpx;
			}

			.p-text {
				width: 420rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba($color: #000000, $alpha: 0.5);
				margin-bottom: 48rpx;
			}

			.p-but {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 68rpx;

				.but {
					flex: 1;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
					background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
					border-radius: 34rpx;
					line-height: 68rpx;
					border: 0;
					margin: 0 20rpx;
				}

				.but1 {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba($color: #000000, $alpha: 0.7);
					background: linear-gradient(-90deg, #ffffff, #ffffff);
					border: 1px solid #C4C4C4;
				}
			}
		}
	}

	// 上班时间
	.box-text {
		line-height: 72rpx;
		color: #000000;
		text-align: right;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.item-fangliang {
		.uni-easyinput {
			text-align: right;
		}
	}
</style>
